<template>
	<div class="content">
		<div class="header">
			<div class="avatar">
				<img class="avatar" :src="userInfoData.head_img" alt="">
			</div>
			<div class="nickname">
				<div class="hi">Hi，亲爱的主播</div>
				<div class="nick">{{ userInfoData.nickname }}</div>
			</div>
		</div>
		<view class="uni-margin-wrap welcome">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,idx) in bannerList" :key="idx">
					<image @click="toform" style="width: 345px; height: 194px; background-color: #eeeeee;" :mode="item.mode" :src="item.img" ></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- <div class="tab">
			<span class="label" :class="{current:tabIndex == 0}" @click="changeTab(0)">全部</span>
			<span class="label" :class="{current:tabIndex == 1}" @click="changeTab(1)">工会活动</span>
			<span class="label" :class="{current:tabIndex == 2}" @click="changeTab(2)">工资杯</span>
		</div> -->
		<div class="content-news">
			<scroll-view class="scroll-view_H tab" scroll-x="true" @scroll="scroll" scroll-left="120">
				<span class="label" v-for="(item,idx) in newsCateList" :key="idx" :class="{current:tabIndexNews == idx}" @click="changeTabnews(idx)">{{ item.name }}</span>
			</scroll-view>
			<div class="anchor">
				<div class="list" v-for="(item) in newsListData" :key="item.id" @click="toDetail(item)">
					<div class="desc">{{ item.title }}</div>
					<img class="pic" :src="item.logo" alt="">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'

	export default {
		components:{
		},
		data() {
			return {
				tabIndex:0,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList:[],
				tabIndexNews:0,
				newsListData:[],
				newsCateList:[],
				cate_id:undefined,
				userInfoData:{}
			}
		},
		async onLoad() {
			this.getUserInfo()
			this.getBanner()
			await this.getAnchorlist()
			await this.getNewsList()
		},
		methods: {
			toform(){
				uni.navigateTo({
					url: '/pages/form/index'
				});
			},
			toDetail(item){
				uni.navigateTo({
					url: '/pages/news/detail?id='+item.id
				});
			},
			async getNewsList(data){
				const resData = await request('api/news/newsInfo?id=1', 'get', {id:data.id});
				this.detailData = resData.data
			},
			//获取用户信息
			async getUserInfo(){
				await uni.getStorage({
					key: 'userInfo',
					success: ({ data }) => {
						this.userInfoData = data
						console.log("🚀 ~ 获取用户信息 ~ data:", data)
					},
					fail: (error) => {
						console.log("🚀 ~ getUserInfo ~ error:", error)
						uni.navigateTo({
							url: '/pages/login/index'
						});
					}
				})
			},
			async getBanner(){
				const resData = await request('api/index/bannerList', 'post', {});
				console.log("🚀 ~ getBanner ~ resData:", resData)
				this.bannerList = resData.data

			},
			changeTab(idx){
				this.tabIndex = idx
			},
			async getNewsList(){
				const resData = await request('api/news/newsList', 'post', {cate_id:this.cate_id,is_index:''});
				this.newsListData = resData.data
			},

			//获取新闻列表
			async getAnchorlist(){
				const resData = await request('api/news/newsCateList', 'post', {});
				this.newsCateList = resData.data
				this.cate_id = this.newsCateList[this.tabIndex].id

			},
			changeTabnews(idx){
				this.tabIndexNews = idx
				this.cate_id = this.newsCateList[this.tabIndexNews].id
				this.getNewsList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		background: url('/static/bg.png') center top no-repeat;
		padding: 100px 15px 18px 15px;
		background-size: contain;
		.header {
			display: flex;
			.avatar {
				width: 48px;
				height: 48px;
				border: 1px solid #000000;
				border-radius: 50%;
			}
			.nickname {
				margin-left: 16px;
			}
			.hi {
				color: #8C8C8C;
				font-size: 14px;
			}
			.nick {
				font-size: 20px;
				color: #212121;
			}
		}
		.welcome {
			margin-top: 20px;
			border-radius: 20px;
		}
		.tab {
			display: flex;
			margin-top: 30px;
			.label {
				margin: 0 15px;
				color: #8C8C8C;
			}
			.current {
				color: #000000;
				position: relative;
				&:after {
					content: '';
					position: absolute;
					bottom:0;
					left: 0;
					width: 100%;
					height: 8px;
					background: linear-gradient( 270deg, rgba(255,54,54,0.6) 0%, rgba(255,103,70,0.6) 100%);
				}
			}
		}
		.anchor {
			padding: 20px 20px;
			border-radius: 28px 28px 0px 0px;
			.list {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F5F5F5;
				padding: 20px 0;
				.desc {
					font-size: 14px;
					color: #212121;
					width:60%;
				}
				.pic {
					width: 96px;
					height: 70px;
					border-radius: 12px;
					border: 2px solid #000;
				}
			}
	}
	}


</style>
